<template>
	<view class="content">
		<view class="form_top">
			<view class="u-flex info_box">
				<view class="form_tit">
					姓名
				</view>
				<input type="text" v-model="name" disabled>
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					职务
				</view>
				<input type="text" v-model="duties" disabled>
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					所属机构
				</view>
				<input type="text" v-model="mechanism" disabled>
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					工资合计
				</view>
				<input type="digit" v-model="total" disabled>
                <text style="line-height: 1;">元</text>
			</view>
		</view>
		
		<view class="form_bottom">
			<view class="u-flex info_box">
				<view class="form_tit">
					底薪
				</view>
				<input type="digit" v-model="basic" placeholder="请输入底薪" class="basic" @blur="blur">
                <text style="line-height: 1;">元</text>
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					提成
				</view>
				<input type="digit" v-model="commission" placeholder="请输入提成" @blur="blur">
                <text style="line-height: 1;">元</text>
			</view>
			<view class="u-flex info_box">
				<view class="form_tit">
					请假
				</view>
				<input type="digit" v-model="leave" placeholder="请输入扣除金额" @blur="blur">
                <text style="line-height: 1;">元</text>
			</view>
		</view>
		
		<view class="btn" @click="$noMultipleClicks(doSubmit)">
			编辑
		</view>
		<!-- <view class="btn">
			确认编辑
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
                noClick:true,//连点
				name: '',
				duties:'',
				mechanism:'',
				total:'',
				basic:'',
				commission:'',
				leave:'',
                id: '',
                data: {},
			}
		},
        onLoad(option) {
            this.id = option.id
            this.getData()
        },
		methods: {
            
            blur() {
                var a = Math.abs(this.leave)
                this.total = Number(this.basic) + Number(this.commission) - Number(a)
            },
            
            doSubmit() {
                if (!this.basic) {
                    this.$toast('请输入底薪')
                    return
                }
                if (!this.commission) {
                    this.$toast('请输入提成')
                    return
                }
                
                this.$ajax('wages_update', {
                    user_token: this.$getSync('userToken'),
                	id: this.id, //工资详情id
                    base_pay: this.basic,//底薪
                    commission: this.commission,//提成
                    money: this.leave,//请假
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            getData() {
            	this.$ajax('wages_detail', {
                    user_token: this.$getSync('userToken'),
            		user_id: this.id,
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.name = ret.detail.user_name
                        this.duties = ret.detail.user_type
                        this.mechanism = ret.detail.institution
                        this.total = ret.detail.wages
                        this.basic = ret.detail.base_pay
                        this.commission = ret.detail.commission
                        this.leave = ret.detail.money
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5 !important;
	}
</style>
<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* border-top: 2rpx solid #ebebeb; */
		padding: 20rpx 20rpx 0;
	}

	.form_top {
		width: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10rpx 24rpx 10rpx;
		margin-bottom: 22rpx;
	}

	.info_box {
		width: 100%;
		height: 96rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}

	.form_top .info_box:last-child {
		border-bottom: none;
	}

	.form_tit {
		font-size: 28rpx;
		line-height: 96rpx;
		color: #707070;
	}

	input {
		flex: 1;
		height: 96rpx;
		font-size: 28rpx;
		line-height: 96rpx;
		color: #000;
		text-align: right;
		padding-left: 20rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
	}
	.form_bottom{
		width: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10rpx 24rpx 10rpx;
		margin-bottom: 80rpx;
	}
	.basic{
		color: #ff3e3e;
	}
	.form_bottom .info_box:last-child{
		border-bottom: none;
	}
	.btn{
		width: 686rpx;
		height: 92rpx;
		font-size: 36rpx;
		line-height: 92rpx;
		color: #fff;
		text-align: center;
		border-radius: 46rpx;
		background-color: #00a0e9;
	}
</style>
